<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
        <div class="layui-form-item">
      <label class="layui-form-label">账号</label>
      <div class="layui-input-block">
        <input type="accountid" name="accountid" placeholder="请输入账号" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">小号</label>
      <div class="layui-input-block">
        <input type="xiaohao" name="xiaohao" placeholder="请输入小号" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">剩余次数</label>
      <div class="layui-input-block">
        <input type="shengyucishu" name="shengyucishu" placeholder="请输入剩余次数" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">添加时间</label>
      <div class="layui-input-block">
        <input type="addtime" name="addtime" placeholder="请输入添加时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">坐席Id</label>
      <div class="layui-input-block">
        <input type="tseatsid" name="tseatsid" placeholder="请输入坐席Id" autocomplete="off" class="layui-input">
      </div>
    </div>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>

<div class="table_div" >
  <div id="searchParam" hidden >
    <div class="layui-form-item">
      <div class="layui-input-inline">
        <input type="text" id="key" class="layui-input"  autocomplete="off" placeholder="请输入">
      </div>

      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
        <!--        <button class="layui-btn"   id="export">导出全部</button>-->
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="addXH" shiro:hasPermission="tSeats:add">添加小号</button>
<!--      <button class="layui-btn layui-btn-sm" lay-event="add"  shiro:hasPermission="tXiaohao:add">添加</button>-->
<!--    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="tXiaohao:delete">删除</button>-->
  </div>
</script>
<script type="text/html" id="tool">
<!--  <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="tXiaohao:update">编辑</a>-->
  <a class="layui-btn layui-btn-xs" lay-event="jinyong" shiro:hasPermission="tXiaohao:update">禁用</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="tXiaohao:delete">删除</a>
</script>
<div id="addxiaohao" class="demo-transfer" style="display: none">
    <form class="layui-form " action="" lay-filter="addxiaohaoInfo" style="width: 700px;margin-top: 10px">
        <input type="id" name="id" hidden/>
        <div class="layui-form-item">
            <label class="layui-form-label">中间号</label>
            <div class="layui-input-block">
                <select id="zjh" name="zjh" lay-filter="select-type" lay-verify="required">
                    <option value=""></option>
                </select>
            </div>
        </div>
    </form>
</div>
<input type="hidden" id="deddd" value ="${tseatsid}">
</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<!--<script src="/js/common.js"></script>-->
<script th:inline="javascript"> var tseatsidVo =[[${tseatsid}]]  </script>
<script>

  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  // var tseatsidVo = ""+[[${tseatsid}]];
  info();
  layui.use(['table', 'layer', 'laydate'], function () {

    //表头工具
    table.on('toolbar(showTable)', function(obj){
      switch(obj.event){
        case 'batchDeleted':
          var checkStatus = table.checkStatus(obj.config.id);
          var data = checkStatus.data;
          if(data.length==0){
            layer.msg("请选择要批量删除的列");
          }else {
            var ids = [];
            $(data).each(function (index,item) {
              ids.push(item.id);
            });
            tipDialog(ids);
          }
          break;
        case 'addXH':
              layer.open({
                  type: 1,
                  offset: '50px',
                  skin: 'layui-layer-molv',
                  title: "添加小号",
                  area: ['800px', '400px'],
                  shade: 0,
                  shadeClose: false,
                  content: jQuery("#addxiaohao"),
                  btn: ['确定', '取消'],
                  yes: function (index) {
                      var zjh = $.trim($("#zjh").val());//中间号
                      var params = {
                          tseatsid: tseatsidVo,
                          zjhid: zjh
                      }
                      CoreUtil.sendPost("/tXiaohao/add", params, function (res) {
                          var code = res.code;
                          //同步数据失败
                          if (code != 0) {
                              layer.msg(res.msg);
                          }
                          search();
                      });
                      layer.close(index);
                  }
              });
              break;
      };
    });
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'del':
          var ids=[];
          ids.push(data.id);
          tipDialog(ids);
          break;
        case 'edit':
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("编辑");
          $(".operation input[name=id]").val(data.id);
          $(".operation input[name=accountid]").val(data.accountid);
          $(".operation input[name=xiaohao]").val(data.xiaohao);
          $(".operation input[name=shengyucishu]").val(data.shengyucishu);
          $(".operation input[name=addtime]").val(data.addtime);
          $(".operation input[name=tseatsid]").val(data.tseatsid);
          break;
        case 'jinyong':
            data.state = 1;//状态改为禁用
            var parm = data;
            layer.open({
                content: "确定要禁用么?",
                yes: function (index, layero) {
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    CoreUtil.sendPut("/tXiaohao/updateState", parm, function (res) {
                        layer.msg(res.msg, {time: 1000}, function () {
                            search();
                        });
                    });
                }
            });

          break;
      }
    });
    //导出
    $('#export').on('click', function () {
      //原先分页limit
      var exportParams = {
        limit: 10000,
          tseatsid: tseatsidVo
      };
      CoreUtil.sendPost("/tXiaohao/listByPage", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });

    //删除
    var tipDialog=function (ids) {
      layer.open({
        content: "确定要删除么?",
        yes: function(index, layero){
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendDelete("/tXiaohao/delete",ids,function (res) {
            layer.msg(res.msg, {time:1000},function () {
              search();
            });
          });
        }
      });
    };

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/tXiaohao/add",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }else {
        CoreUtil.sendPut("/tXiaohao/update",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }

      return false;
    });
  });

  //执行查询
  function search() {
    //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
        key: $("#key").val()
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
  //初始化数据
  function info() {
      userInfo = CoreUtil.getData("userInfo");
      userRoles = CoreUtil.getData("userRoles");
      userDepts = CoreUtil.getData("userDepts");
      sysRolesList = CoreUtil.getData("sysRolesList");
      userSysUsers = CoreUtil.getData("userSysUsers");
      hwtj = CoreUtil.getData("hwtj");

      //加载表格
      tableIns();
      CoreUtil.sendPost("/tMiddlenum/dataInfo/"+tseatsidVo, null, function (res) {
          var zjh = $("#zjh");
          $.each( res.data, function (index, item) {
              zjh.append("<option value=" + item.id + ">" + item.middlenum + "</option>");
          });
          form.render("select");
      });
  }
  //加载表格
  function tableIns(){
      if(!tableIns1){
          //加载table
          tableIns1 = table.render({
              elem: '#showTable'
              , contentType: 'application/json'
              , headers: {"authorization": token}
              , page: true //开启分页
              , url: '/tXiaohao/listByPage' //数据接口
              , where:{
                  tseatsid:tseatsidVo
              }
              , method: 'POST'
              , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                  return {
                      "code": res.code, //解析接口状态
                      "msg": res.msg, //解析提示文本
                      "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                      "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                  }
              }
              , cols: [
                  [
                      {type: 'checkbox', fixed: 'left'},
                      {title: "序号",type: "numbers"},
                      {field: 'accountid', title: '账号', templet: function (item) {
                              var userName = "";
                              $.each(userSysUsers, function (index, user, array) {
                                  if (user.id == item.accountid) {
                                      userName = user.username;
                                  }
                              });
                              return userName;
                          },sort: true},
                      {field: 'xiaohao', title: '小号', sort: true},
                      {field: 'shengyucishu', title: '剩余次数', sort: true},
                      {field: 'addtime', title: '添加时间', sort: true},
                      // {field: 'tseatsid', title: '坐席Id', sort: true},
                      {width: 120, toolbar: "#tool", title: '操作'}
                  ]
              ]
              , toolbar: '#toolbar'
          });
      }
  }
</script>